<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery创建添加删除元素</title>
    <script src="../jquery/jquery.v3.7.1.js"></script>
</head>

<body>
    <div>
        <p>jQuery创建、添加、删除元素</p>
        <p>创建元素：<br>语法：var li = $('< li>####< /li>')</p>
        <p>添加元素：</p>
        <p>1、内部添加元素：</p>
        <p>方法一：element.append(li); 是添加到内容的最后面。</p>
        <p>方法二：element.prepend(li); 是添加到内容的最前面。</p>
        <p>2、外部添加：</p>
        <p>方法一：element.after(li); 是添加到目标元素的后面。</p>
        <p>方法二：element.before(li); 是添加到目标元素的前面。</p>
        <p style="color: red;">内部添加元素，生成之后，它们是父子关系。<br>外部添加元素，生成之后，它们是兄弟关系。</p>
        <p>删除元素：</p>
        <p>方法一：element.remove(); 删除匹配元素的本身。</p>
        <p>方法二：element.empty(); 删除所有匹配元素集合中所有子节点。</p>
        <p>方法三：element.html(''); 清空匹配的元素内容。</p>
    </div>
    <div>
        <ul>
            <li>原先的 li元素</li>
        </ul>
    </div>
    <script>
        $(function () {
            //一、创建元素
            var li = $('<li>我是后来创建的 li元素</li>')
            //二、添加元素
            // 1、内部添加
            //添加到内容的最后面
            $('ul').append(li);
            //添加到内容的最前面 
            $('ul').prepend(li); 
            // 2、外部添加
            var p = $('<p>不要学编程</p>')
            //添加到目标元素的后面
            $('ul').after(p); 
            //添加到目标元素的前面
            $('ul').before(p);
            //三、删除元素
            //1、删除元素本身
            // $('ul').remove();
            // $('ul').siblings().remove();
            //2、删除所有匹配元素集合中所有节点
            // ul标签还在，但是 ul里面的 li标签全被删除了。
            // $('ul').empty();
            // $('ul').siblings().empty();
            // 删除了 p标签的中的内容,包括文本,但 p标签本身还在.
            // $('ul').siblings().empty();
            //3、清空匹配元素内容
            // 除了 ul标签外，ul标签中的内容都被删除清空了。与empty()方法不同，html()方法是直接修改了 ul标签中的内容。
            $('ul').html(p);
        })
    </script>
</body>

</html>